<template>
    <div id="pipeGIS">
        <div class="container">
            <div class="choose-button clearfix">
                <div class="top-button">
                    <el-button-group class="choose-data left-button">
                        <el-button type="primary" class="bg-color left checked">管线</el-button>
                        <el-button type="primary" class="bg-color left">节点</el-button>
                        <el-button type="primary" class="bg-color left">附属物</el-button>
                    </el-button-group>
                    <el-button-group class="right-button">
                            <el-button type="primary" class="bg-color right checked" @click="addData"><i class="el-icon-plus el-icon--right"></i>新增</el-button>
                            <!-- 新增弹窗和编辑弹窗 -->
                            <el-dialog :title="title" :visible.sync="dialogFormVisible" :before-close="handleClose">
                                <el-form v-model="formData" ref="refRuleForm">
                                <!-- 设备编号 -->
                                    <el-form-item label="编号" :label-width="formLabelWidth" required>
                                        <el-input v-model="formData.name" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <!-- 管径 -->
                                    <el-form-item label="管径" :label-width="formLabelWidth" required>
                                        <el-input v-model="formData.pipeDiameter" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <!-- 管材 -->
                                    <el-form-item label="管材" :label-width="formLabelWidth" required>
                                        <el-radio-group v-model="dialogRadioMaterial">
                                            <el-radio label="铜管">铜管</el-radio>
                                            <el-radio label="镀锌管">镀锌管</el-radio>
                                            <el-radio label="不锈钢">不锈钢</el-radio>
                                            <el-radio label="铸铁">铸铁</el-radio>
                                            <el-radio label="PE_RT管">PE_RT管</el-radio>
                                            <el-radio label="PPR管">PPR管</el-radio>
                                            <el-radio label="PB管">PB管</el-radio>
                                            <el-radio label="复合管">复合管</el-radio>
                                            <el-radio label="其他">其他</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <!-- 管龄 -->
                                    <el-form-item label="管龄" :label-width="formLabelWidth" required v-if="title == '新增'">
                                        <!-- <el-input v-model="formData.pipeAge" autocomplete="off"></el-input> -->
                                        <el-date-picker :popper-append-to-body="false" popper-class="elDatePicker"
                                            v-model="dialogPipeAgeTime"
                                            value-format='yyyy-MM-dd HH:mm:ss'
                                            type="datetime"
                                            placeholder="请选择管龄日期">
                                        </el-date-picker>
                                        <!-- <span class="demonstration">至</span>
                                        <el-date-picker :popper-append-to-body="false" popper-class="elDatePicker"
                                            v-model="dialogPipeAgeEnd"
                                            type="date"
                                            placeholder="请选择时间">
                                        </el-date-picker> -->
                                    </el-form-item>
                                    <el-form-item label="管龄" :label-width="formLabelWidth" required v-else>
                                        <!-- <el-input v-model="formData.pipeAge" autocomplete="off"></el-input> -->
                                        <el-date-picker :popper-append-to-body="false" popper-class="elDatePicker"
                                            v-model="dialogPipeAgeTime"
                                            value-format='yyyy-MM-dd HH:mm:ss'
                                            type="datetime"
                                            placeholder="请选择管龄日期">
                                        </el-date-picker>
                                    </el-form-item>
                                    <!-- 状态 -->
                                    <el-form-item label="状态" :label-width="formLabelWidth" required>
                                        <el-select v-model="value3" placeholder="请选择设备状态">
                                            <el-option
                                            v-for="item in secondStatus"
                                            :key="item.value3"
                                            :label="item.label"
                                            :value="item.value3">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <!-- 起点埋深 -->
                                    <el-form-item label="起点埋深" :label-width="formLabelWidth" required>
                                        <el-input v-model="formData.buryDeepStart" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <!-- 终点埋深 -->
                                    <el-form-item label="终点埋深" :label-width="formLabelWidth" required>
                                        <el-input v-model="formData.buryDeepEnd" autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-form>
                                <!-- 取消和确定按钮 -->
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
                                </div>
                            </el-dialog>
                            <el-button type="primary" class="bg-color right" @click="deleteData"><i class="el-icon-delete el-icon--right"></i>删除</el-button>
                            <el-button type="primary" class="bg-color right"><i class="el-icon-upload el-icon--right"></i>导入</el-button>
                            <el-button type="primary" class="bg-color right" @click="exportData"><i class="el-icon-download el-icon--right"></i>导出</el-button>
                    </el-button-group> 
                </div>
                <div class="demo-input-suffix">
                    <el-input class="research"
                        placeholder="请输入设备ID进行查询"
                        suffix-icon="el-icon-search"
                        v-model="input" @click="getData">
                    </el-input>
                </div>
                <div class="checkbox material">
                    <span>材质：</span>
                    <el-radio-group v-model="radioMaterial">
                        <el-radio label="铜管">铜管</el-radio>
                        <el-radio label="镀锌管">镀锌管</el-radio>
                        <el-radio label="不锈钢">不锈钢</el-radio>
                        <el-radio label="铸铁">铸铁</el-radio>
                        <el-radio label="PE_RT管">PE_RT管</el-radio>
                        <el-radio label="PPR管">PPR管</el-radio>
                        <el-radio label="PB管">PB管</el-radio>
                        <el-radio label="复合管">复合管</el-radio>
                        <el-radio label="其他">其他</el-radio>
                    </el-radio-group>
                </div>
                <div class="option container pipe-age">
                    <span class="demonstration">管龄：</span>
                    <el-date-picker :popper-append-to-body="false" popper-class="elDatePicker"
                        v-model="pipeAgeBegin"
                        value-format='yyyy-MM-dd HH:mm:ss'
                        type="datetime"
                        placeholder="出厂时间"
                        default-time="12:00:00">
                    </el-date-picker>
                    <span class="demonstration">至</span>
                    <el-date-picker :popper-append-to-body="false" popper-class="elDatePicker"
                        v-model="pipeAgeEnd"
                        value-format='yyyy-MM-dd HH:mm:ss'
                        type="datetime"
                        placeholder="过期时间"
                        default-time="12:00:00">
                    </el-date-picker>
                    <span class="pipe-diam">管径：</span>
                    <i class="el-icon-remove-outline el-icon--left"></i>
                    <el-select v-model="value1" placeholder="100mm" :popper-append-to-body="false">
                        <el-option
                        v-for="item in firstOptions"
                        :key="item.value1"
                        :label="item.label"
                        :value="item.value1">
                        </el-option>
                    </el-select>
                    <i class="el-icon-remove-outline el-icon--left"></i>
                    <span>至</span>
                    <el-select v-model="value2" placeholder="800mm" :popper-append-to-body="false">
                        <el-option
                        v-for="item in secondOptions"
                        :key="item.value2"
                        :label="item.label"
                        :value="item.value2">
                        </el-option>
                    </el-select>
                </div>
                <div class="status">
                    <span>状态：</span>
                    <i class="el-icon-remove-outline el-icon--left"></i>
                    <el-select v-model="value" placeholder="设备状态">
                        <el-option
                        v-for="item in status"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <span class="method">敷设方式：
                        <el-radio-group v-model="buryMethodRadio" class="methods">
                            <el-radio label="直埋">直埋</el-radio>
                            <el-radio label="管沟">管沟</el-radio>
                            <el-radio label="架空">架空</el-radio>
                        </el-radio-group>
                    </span>
                </div>
                <div class="reset">
                    <el-row>
                        <el-button round style="background:#1AB394;border:none" @click="resetData">重置</el-button>
                        <el-button type="warning" round @click="getData">查询</el-button>
                    </el-row>
                    <el-button-group class="chearfix">
                        <el-button class="bg-color checked" type="primary" icon="el-icon-s-grid">表格</el-button>
                        <el-button class="bg-color" type="primary" icon="el-icon-map-location">地图</el-button>
                    </el-button-group>
                </div> 
                <div class="table clearfix" :popper-append-to-body="false">
                    <el-card>
                        <el-table :popper-append-to-body="false" ref="multipleTable" :data="tableData" height:250px tooltip-effect="dark" style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="name" label="编号"></el-table-column>
                            <el-table-column prop="pipeDiameter" label="管径" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="pipe" label="管材"> </el-table-column>
                            <el-table-column prop="pipeAge" label="管龄" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="status" label="状态" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="buryDeepStart" label="起点埋深" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="buryDeepEnd" label="终点埋深" show-overflow-tooltip></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button class="edit"
                                    size="mini"
                                    type="primary"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button class="del"
                                    size="mini"
                                    type="danger"
                                    @click="open(scope.row)">删除</el-button>
                                    <el-button class="location"
                                    size="mini"
                                    type="success"
                                    @click="handleEdit(scope.$index, scope.row)">定位</el-button>
                                    <el-button class="other"
                                    size="mini"
                                    type="warning"
                                    @click="handleDelete(scope.$index, scope.row)">更多操作</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <i class="el-icon-menu"></i>
                        <!-- <div class="block">
                            <el-pagination :popper-append-to-body="false" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5, 8, 10, 20]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="220">
                            </el-pagination>
                        </div> -->
                        <el-pagination :popper-append-to-body="false"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="query.pageNum"
                            :page-sizes="[8,9,10,12]"
                            :page-size="query.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="query.total"
                        ></el-pagination>
                    </el-card>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import {exportPipeData} from '@/api/index.js'
export default {
     data() {
        return {
            title: '新增',
            // 表格中的管龄
            pipeAgeBegin: '',
            pipeAgeEnd: '',
            // 弹窗中的管龄
            dialogPipeAgeTime: '',
            // 单选框（管材和敷设方式）
            radioMaterial: '',
            buryMethodRadio: '',
            // 弹窗中的单选框
            dialogRadioMaterial: '',
            selectIds:[],
            allId: '',
            dialogFormVisible: false,
            formData: {
                name: '',
                pipeDiameter: '',
                pipeAge: '',
                buryDeepStart: '',
                buryDeepEnd: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px',
            status:[{
                value: '在线',
                label: '在线'
            }, {
                value: '离线',
                label: '离线'
            },],
            value: '',
            // 新增和修改弹窗里的数据
            // 弹窗状态选项
            secondStatus: [{
                value3: '在线',
                label: '在线'
            }, {
                value3: '离线',
                label: '离线'
            },],
            value3: '',
            firstOptions: [{
                value1: '100mm',
                label: '100mm'
            }, {
                value1: '200mm',
                label: '200mm'
            }, {
                value1: '300mm',
                label: '300mm'
            }, {
                value1: '400mm',
                label: '400mm'
            }, {
                value1: '500mm',
                label: '500mm'
            }, {
                value1: '600mm',
                label: '600mm'
            }, {
                value1: '700mm',
                label: '700mm'
            },],
            value1: '',
            secondOptions: [
                {
                value2: '200mm',
                label: '200mm'
            }, {
                value2: '300mm',
                label: '300mm'
            }, {
                value2: '400mm',
                label: '400mm'
            }, {
                value2: '500mm',
                label: '500mm'
            }, {
                value2: '600mm',
                label: '600mm'
            }, {
                value2: '700mm',
                label: '700mm'
            },{
                value2: '800mm',
                label: '800mm'
            }],
            value2: '',
            input: '',
            //table 表数据
            tableData: [],
            //分页数据
            query: {
                pageNum: 1,
                pageSize: 9,
                total: 0
            },

                                    
      }
    },
     mounted() {
        this.getData();
    },
    methods: {
        // 打开是否删除数据的提示弹窗
        open(row) {
            //console.log(index,row)
            let arr =[]
            let id = row.id
            let Ids = arr.push(id)
            console.log(Ids)
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post('http://43.136.137.111:9898/system/pipe/gis/delete/batch',{
                    ids: arr
                }).then( res => {
                    console.log(res,200)
                    return false
                }).catch( error => {
                    console.log(error,404)
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.getData()
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
            });          
        });
             
        },
        //顶部的删除数据方法
        deleteData() {
            if(this.selectIds.length == 0){
                this.$message.error('请勾选需要删除的数据项！')
                return false
            }else{
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('http://43.136.137.111:9898/system/pipe/gis/delete/batch',{
                        ids: this.selectIds
                    }).then( res => {
                        console.log(res,200)
                        return false
                    }).catch( error => {
                        console.log(error,404)
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData()
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            } 
        },
        // 新增
        addData() {
            this.dialogFormVisible = true
            this.formData = {}
            this.dialogRadioMaterial = ''
            // this.dialogPipeAgeBegin = ''
            // this.dialogPipeAgeEnd = ''
            this.dialogStatus = ''
            this.dialogPipeAgeTime = ''
        },
        // 编辑数据
        handleEdit(index, row) {
            console.log(index,row.id)
            this.dialogFormVisible = true //显示弹窗
            this.formData = row //row当前行数据，把当前行的数据赋值给表单
            this.value3 = row.status
            this.dialogPipeAgeBegin = row.startTime
            this.dialogPipeAgeEnd  = row.endTime
            this.dialogRadioMaterial = row.pipe
            this.allId = row.id //把id存全局
            this.title = '编辑修改'
            this.dialogPipeAgeTime = row.pipeAge
        },
        // 确定按钮
        dialogVisibleConfirm(){
            // 新增接口
            if(!this.allId) {
                this.$axios.post('http://43.136.137.111:9898/system/pipe/gis/add',{
                    //新增需要传递的参数
                    name: this.formData.name,
                    pipeDiameter: this.formData.pipeDiameter,
                    pipe: this.dialogRadioMaterial,
                    pipeAge: this.dialogPipeAgeTime,
                    buryDeepStart: this.formData.buryDeepStart,
                    buryDeepEnd: this.formData.buryDeepEnd,
                    status: this.value3
                }).then( res => {
                    if(this.formData.name == ''){
                        this.$confirm('编号不能为空！')
                        return false
                    }else if(this.formData.pipeDiameter == ''){
                        this.$confirm('管径不能为空！')
                        return false
                    }else if(this.dialogRadioMaterial == ''){
                        this.$confirm('管材不能为空！')
                        return false
                    }else if(this.value3 == ''){
                        this.$confirm('设备状态不能为空！')
                        return false
                    }else if(this.formData.buryDeepStart == ''){
                        this.$confirm('起点埋深不能为空！')
                        return false
                    }else if(this.formData.buryDeepEnd == ''){
                        this.$confirm('终点埋深不能为空！')
                        return false
                    }else{
                        this.tableData.push(this.formData)
                        this.$message.success("添加成功");     //新增成功消息提示
                        // this.$refs.refRuleformData.resetFields(); //清空表格数据
                        this.dialogFormVisible = false;           //关闭弹框
                        this.getData()
                        //this.dialogFormVisible = false
                        //debugger
                        return
                    }
                }).catch(error => {
                    this.$message.error("添加失败");
                    console.log(error,404)
                })
            }else{
                // 修改接口
                let id = this.allId
                this.$axios.post('http://43.136.137.111:9898/system/pipe/gis/edit',{
                    // 编辑需要传递的参数
                    id: id,
                    name: this.formData.name,
                    pipeDiameter: this.formData.pipeDiameter,
                    pipe: this.dialogRadioMaterial,
                    status: this.value3,
                    pipeAge: this.dialogPipeAgeTime,
                    buryDeepStart: this.formData.buryDeepStart,
                    buryDeepEnd: this.formData.buryDeepEnd,
                }).then( res => {
                    console.log(res,"修改")
                    this.$message.success("修改成功");
                    this.dialogFormVisible = false;
                    this.getData();
                })
            }
            
        },
         // 获取数据、分页查询
        getData() {
            //table总数据
            // post请求
            this.$axios.post('http://43.136.137.111:9898/system/pipe/gis/list',{
                // 获取数据和分页查询需要用到的参数
                pageSize: this.query.pageSize,
                pageNum: this.query.pageNum,
                name: this.input,
                status: this.value,
                min: this.value1,
                max: this.value2,
                pipe: this.radioMaterial,
                startTime: this.pipeAgeBegin,
                endTime: this.pipeAgeEnd,
                buryMethod: this.buryMethodRadio,
            }).then( res => {
                console.log(res,'获取成功！')
                this.tableData = res.data.rows
                this.query.total = res.data.total
                console.log(this.radioMaterial)
            }).catch( error => {
                console.log(error,'获取失败，请检查！')
            })
        },
        // 重置按钮
        resetData() {
            this.input = ''
            this.query.pageSize = 9
            this.query.pageNum = 1
            this.value = ''
            this.radioMaterial = ''
            this.buryMethodRadio = ''
            this.pipeAgeBegin =''
            this.pipeAgeEnd = ''
            this.getData()
        },
        // 导出管网数据
        exportData(){
           this.fullscreenLoading = true;
			exportPipeData({ids:this.selectIds}).then(res => {
				let blob = new Blob([res.data])
				const fliName = '管网数据'+new Date().getTime()+ '.xlsx'
				saveAs(blob,fliName)
				this.fullscreenLoading = false;
			}).catch(error => {
				console.log(error)
			})
        },
        // 切换当前页显示的数据条数，执行方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.query.pageSize=val
            this.getData()
        },
        //切换页数，执行方法
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.query.pageNum=val
            this.getData()
        },
        // 关闭表格弹窗
        handleClose(done){
            this.dialogFormVisible = false
        },
        toggleSelection(rows) {
            if (rows) {
            rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
            });
            } else {
            this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            //debugger
			let arr = [];
			val.forEach(element => {
				arr.push(element.id)
			});
			this.selectIds = arr;
        },
       
    },
}
</script>

<style lang="less" scoped>
    ul {
	padding: 0;
	margin: 0;
    }

    li {
        list-style: none;
    }
    .bg-color{
        color: #666;
        background-color: #02182d;
        border-color: #666;
        line-height: 0;
    }
    .bg-color:hover{
        border: 1px solid #029AFA;
    }
    /* 清除浮动 */
    .clearfix::after{
        content:'';
        display: block;
        clear:both;
        height:0;

    }
    /deep/ .el-radio__inner {
        border: 1px solid #dcdfe6;
        border-radius: 2px;
        width: 16px;
        height: 16px;
        background-color: #fff;
        cursor: pointer;
        box-sizing: border-box;
    }
    // 文字和单选之间的距离
    /deep/ .el-radio__label {
        padding-left: 5px;
    }
        // 选中状态改变成对钩
        /deep/ .el-radio__input.is-checked .el-radio__inner::after {
        content: '';
        width: 10px;
        height: 5px;
        border: 2px solid white;
        border-top: transparent;
        border-right: transparent;
        text-align: center;
        display: block;
        position: absolute;
        top: 1px;
        left: 1px;
        vertical-align: middle;
        transform: rotate(-45deg);
        border-radius: 0px;
        background: none;
    }
    span{
        font-size: 14px;
        color: #fff;
    }
    /deep/ .el-radio__inner{
        background-color: #02182d;
    }
    /deep/ .el-dialog .el-form .el-radio__inner{
        background: none;
        width: 18px;
        height: 18px;
        color: #333;
    }
    /deep/ .el-dialog .el-form{
        font-size: 18px;
    }
    /deep/ .el-dialog__headerbtn .el-dialog__close {
        font-size: 24px;
    }
    /deep/ .el-form-item__label {
        color: #333;
        font-size: 18px;
        line-height: 60px;
    }
    /deep/ .dialog-footer .el-button{
        width: 80px;
        height: 40px;
        line-height: 60px;
        span{
            font-size: 18px;
        }
    }
    /deep/ .el-card__body, .el-main {
        padding: 0px; 
    }
    /deep/.el-table .el-table__cell {
        padding: 16px 0;
    }
     #pipeGIS{
        position: relative;
        background: #02182d;
        height: 100%;
        padding: 0 40px;
        .container{
            background-color: #02182d;
            position: relative;
            width: 100%;
            margin: 0 auto;
        }
        .choose-button{
                position: relative;
                display: block;
                top: 82px;
                height: 32px;
                padding: 8px 0;
                border-bottom: 1px solid #666;
                padding-top: 30px;
                
                .choose-data .left{
                    width: 80px;
                    height: 32px;
                    color: #fff;
                    border-right:1px solid #666 ;
                }
                .left:nth-child(1){
                    color: #029AFA;
                    border: 1px solid #029AFA;
                }
                .choose-data .left:hover{
                    color: #029AFA;
                }
                .choose-data .left:nth-child(3){
                    border-top-right-radius: 3px;
                    border-bottom-right-radius: 3px;
                }
                .top-button{
                    display: flex;
                    justify-content: space-between;
                }
                .right{
                    width: 52px;
                    height: 32px;
                    font-size: 14px;
                    color: #fff;
                    border: 1px solid #666;
                    padding: 8px 0;
                }
                .right:hover{
                    color: #029AFA;
                    border: 1px solid #029AFA;
                }
                .right:nth-child(1){
                    color: #029AFA;
                    border: 1px solid #029AFA;
                }
                .research{
                    top: 20px;
                    width: 238px;
                    height: 30px;
                    background-color: none;
                    background-color: #02182d;
                    color: #666;
                    font-size: 14px;
                    border: none;
                }
                /deep/ .el-input__inner{
                    background-color: #02182d;
                    border: 1px solid #666;
                    border-radius: 4px;
                }
                /deep/ .el-dialog .el-form .el-input__inner{
                    background: none;
                    height: 60px;
                    line-height: 60px;
                    font-size: 18px;
                    color: #333;
                }
                /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
                    width: 278px;
                }
                /deep/ .el-dialog .el-form .el-radio{
                    color: #333;
                    font-size: 40px;
                }
                /deep/ .el-dialog .el-form .el-radio__input.is-checked .el-radio__inner::after {
                    content: '';
                    width: 10px;
                    height: 5px;
                    border: 2px solid #029AFA;
                    border-top: transparent;
                    border-right: transparent;
                    text-align: center;
                    display: block;
                    position: absolute;
                    top: 1px;
                    left: 1px;
                    vertical-align: middle;
                    transform: rotate(-45deg);
                    border-radius: 0px;
                    background: none;
                }
                /deep/ .el-dialog .el-form .el-radio__inner {
                    border: 1px solid #333;
                    border-radius: 2px;
                    width: 16px;
                    height: 16px;
                    background-color: #fff;
                    cursor: pointer;
                    box-sizing: border-box;
                }
                /deep/ .el-dialog .el-form .el-radio__label {
                    padding-left: 5px;
                    font-size: 18px;
                }

                .material{
                    margin-top: 40px;
                    display: flex;
                    justify-content: flex-start;
                    .el-radio{
                        color: #fff;
                    }
                }
                .pipe-age{
                    margin-top: 15px;
                    .el-icon-remove-outline:nth-child(6){
                        position: absolute;
                        color: #fff;
                        top: 7px;
                        left: 624px;
                        z-index: 9;
                    }
                    .el-icon-remove-outline:nth-child(8){
                        color: #fff;
                        position: absolute;
                        top: 7px;
                        left: 794px;
                        z-index: 9;
                    }
                    .pipe-diam{
                        margin-left: 90px;
                    }
                    /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner{
                        width: 200px;
                    }
                    /deep/ .el-input__inner{
                        width: 200px;
                        height: 32px;
                        background-color: #02182d;
                        border: 1px solid #666;
                        border-radius: 4px;
                    }
                    /deep/ .el-input__icon {
                        line-height: 32px;
                    }
                    .el-select{
                        width: 146px;
                        /deep/ .el-input__inner{
                            height: 32px;
                            width: 146px;
                            -webkit-appearance: none;
                            background-color: #02182d;
                            color: #fff;
                            border: 1px solid #666;
                            border-radius: 0px;
                            text-align: center;
                        }
                        /deep/ .el-select .el-input .el-select__caret{
                            color:#fff;
                        }
                        /deep/ .el-select-dropdown{
                            background-color: #02182d;
                            border-radius: 0px;
                            /deep/ .el-select-dropdown__item{
                                background-color: transparent;
                                color:#fff;
                            }
                            /deep/ .el-select-dropdown__item.hover,/deep/ .el-select-dropdown__item:hover{
                                color:#fff;
                            }
                            /deep/ .el-popper .popper__arrow, .el-popper .popper__arrow::after{
                                display: none;
                            }
                        }
                        /deep/ .el-select-dropdown__wrap{
                            background-color: #02182d !important;
                        }
                        /deep/ .el-select-dropdown__item {
                            padding: 0 40px;
                        }
                    }
                }
                .status{
                    margin-top: 15px;
                    position: relative;
                     /deep/ .el-input__inner{
                        width: 146px;
                        height: 30px;
                        background-color: #02182d;
                        border: 1px solid #666;
                        border-radius: 4px;
                    }
                    .el-icon-remove-outline{
                        color: #fff;
                        position: absolute;
                        top: 7px;
                        left: 54px;
                        z-index: 9;
                    }
                    /deep/ .el-input__inner{
                        padding: 0 30px;
                    }
                    /deep/ .el-input__icon{
                        line-height: 32px;
                    }
                    .method{
                        margin-left: 260px;
                        .methods{
                            display: inline-block;
                            .el-radio{
                                color: #fff;
                            }
                        }
                    
                    }

                }
                .reset{
                    margin-top: 15px;
                    position: relative;
                    .el-button{
                        width: 80px;
                        height: 32px;
                        color: #fff;
                        padding: 8px 15px;
                    }
                    .el-row .el-button:hover {
                        border: 1px solid #666;
                        color: #333;
                    }
                    .el-row{
                        margin-left: 695px;
                    }
                    .el-button-group{
                        float: right;
                        margin-top: -28px;
                        margin-right: 0px;
                    }
                    /deep/ .el-button-group .el-button:nth-child(1){
                        color: #029AFA;
                        border: 1px solid #029AFA;
                    }
            }
                .table{
                    margin-top: 15px;
                    position: relative;
                    display: block;
                    width: 100%;
                    background-color: #02182d !important;
                }
                /deep/ .el-table, .el-table__expanded-cell {
                            background-color: transparent;
                            //margin-left: 40px;
                        }
                /deep/ .el-table th, .el-table tr {
                    background-color: transparent;
                    border-bottom: 1px solid #02182d;
                }
                /deep/ .el-table__body tr:hover > td{
                    border: 1px solid #029AFA;
                    border-color:#02182d !important;
                    color: #029AFA;
                    background: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%);
                }
                .el-card{
                    position: relative;
                    border: none;
                    background: #02182d !important;
                    .el-icon-menu{
                        position: absolute;
                        top: 17px;
                        right: 70px;
                        z-index: 9;
                        color: #fff;
                    }
                }
                .el-card__body, .el-main {
                    padding: 0; 
                }
                /deep/ .el-table tr{
                    background-color: #02182d;
                    color: #fff;
                    border: none;
                    border-bottom: 1px solid #666;
                }
                /deep/ .el-table__header tr:nth-child(1){
                    background: rgba(11, 117, 216, 0.1);
                }
                /deep/ .el-pagination__total{
                    color: #fff;
                }
                /deep/ .el-input__inner{
                    background-color: #02182d;
                    color: #fff;
                    height: 40px;
                }
                /deep/ .el-pagination .el-input__inner{
                    height: 32px;
                }
                /deep/ .el-pagination button:disabled {
                    background-color: #02182d !important;
                }
                /deep/ .el-pagination .btn-next, /deep/ .el-pagination .btn-prev {
                    background: #02182d !important;
                    color: #fff;
                }
                /deep/ .el-pagination .btn-next:hover,/deep/ .el-pagination .btn-prev:hover{
                    color: #029AFA;
                }
                /deep/ .el-pager li{
                    background-color: #02182d !important;
                    color: #fff;
                }
                /deep/ .el-pager li:hover{
                    color: #029AFA;
                }
                /deep/ .el-pagination__jump{
                    color: #fff;
                }
                /deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
                    border-bottom: 1px solid #666;
                }
                
                /deep/ .el-table--border::after, .el-table--group::after, .el-table::before{
                    background-color: #666;
                }
                /deep/ .el-select-dropdown{
                    background-color: #02182d !important;
                }
                /deep/ .el-pagination .el-select .el-input .el-input__inner{
                    border: none;
                    border: 1px solid #666;
                    border-radius: 3px;
                }
                /deep/ .el-pagination__editor .el-input__inner{
                    border: none;
                    border: 1px solid #666;
                }
                /deep/.el-pagination{
                    margin: 20px 40%;
                }
                ///deep/ .el-table tr:nth-child(7) td:nth-child(6){
                    //color: orange;
                //}
                /deep/ .el-button--mini{
                    width: 42px;
                    height: 22px;
                    padding: 7px 8px;
                }
                /deep/ .el-button--mini:last-child{
                    width: 72px;
                }
                /deep/ .el-button{
                    line-height: 0;
                }
                /deep/ .el-table .cell {
                    padding-left: 0;
                    padding-right: 0;
                }
                /deep/ .el-button+.el-button, .el-radio.is-bordered+.el-radio.is-bordered{
                    margin-left: 0;
                }
                

        }
     }
</style>